/*
 * @Author: ZARR 
 * @Date: 2018-03-30 10:02:04 
 * @Last Modified by: ZARR
 * @Last Modified time: 2018-04-10 16:57:10
 * @功能: 官网首页banner插件 
 */

<template>
  <div id="main">
    <main-header :isMobile="isMobile" :even="flag"></main-header>
    <div class="banner">
      <div
        class="item"
        :style="{backgroundImage: isMobile ? `url('${banner.mobileImg}')` : `url('${banner.pcImg}')`}"
        v-for="(banner, index) in back"
        :key="index"
        :class="[{'active': flag == index},{'even' : (index+1) % 2 == 0}]"
      >
        <div class="container">
          <div class="inContent">
            <p class="title" :style="{color: banner.titleColor}">{{banner.title}}</p>
            <p class="content">{{banner.content}}</p>
            <div class="buttons">
              <a :href="banner.moreUrl" class="learn">了解更多</a>
              <a :href="banner.buyUrl" class="buy">立即购买</a>
            </div>
          </div>
        </div>
      </div>
      <div :class="[{'AllEven' : (flag+1) % 2 == 0}, 'pots']">
        <div
          class="pot"
          v-for="(banner, index) in back"
          :key="index"
          :class="[{'active': flag == index},{'potEven' : (index+1) % 2 == 0}]"
          @click="changeBanner(index)"
        ></div>
      </div>
    </div>
  </div>
</template>


<script>
import MainHeader from "~/components/Header";
export default {
  data() {
    return {
      back: [
        {
          pcImg:
            "https://cdn.swellpro.cn/index/splashdrone3-auto-banner-pc.jpg",
          mobileImg:
            "https://cdn.swellpro.cn/index/splashdrone3-auto-banner-m.jpg",
          moreUrl: "/waterproof-splash-drone-3-auto.html",
          buyUrl:
            "https://detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-17769692699.1.1d5c5404nm5IsZ&id=564196872083&skuId=3729483910352&scene=taobao_shop",
          content: "始于防水，不止于此",
          title: "水手3+",
          titleColor: "#39fdff"
        },
        {
          pcImg: "https://cdn.swellpro.cn/index/ffPc.jpg",
          mobileImg: "https://cdn.swellpro.cn/index/ffMobile.jpg",
          moreUrl: "/spry.html",
          buyUrl: "",
          content: "迎雨翱翔，灵巧如燕",
          title: "雨燕便携防水无人机",
          titleColor: "#6cbafd"
        },
        {
          pcImg: "https://cdn.swellpro.cn/three-axio.jpg",
          mobileImg:
            "https://cdn.swellpro.cn/index/splashdrone3-auto-banner-m.jpg",
          moreUrl: "/waterproof-splash-drone-3-auto.html#three",
          buyUrl:
            "https://detail.tmall.com/item.htm?spm=a1z10.3-b-s.w4011-17581556065.163.3bd13912bUeRJ3&id=574907936302&rn=aff0c3ec3b06c44c3c17b0377444cb4a&abbucket=11&skuId=3938933855107",
          content: "清晰稳定的世界，为你呈现",
          title: "三轴防水云台相机",
          titleColor: "#fff"
        },
        {
          pcImg:
            "https://cdn.swellpro.cn/index/splashdrone3-fishing-banner-pc.jpg",
          mobileImg:
            "https://cdn.swellpro.cn/index/splashdrone3-fishing-banner-m.jpg",
          moreUrl: "/waterproof-splash-drone-3-fisherman.html",
          buyUrl:
            "https://detail.tmall.com/item.htm?spm=a1z10.5-b-s.w4011-17761610828.50.3b3724952z3j6l&id=564379410811&rn=3cbdbdb2fd308f7f86ced255c39457b6&abbucket=11&skuId=3730536031236",
          content: "尽享钓鱼乐趣",
          title: "水手3钓鱼版",
          titleColor: "#671dcd"
        }
        // {pcImg : 'https://cdn.swellpro.cn/index/dronepower-45k-banner-pc.jpg', mobileImg : 'https://cdn.swellpro.cn/index/dronepower-45k-banner-m.jpg', moreUrl: '/dronepower-45K.html', buyUrl: '', content: '小身材 大能量', title: '无人机充电站45K', titleColor: '#19ae43'},
      ],
      flag: -1, //开头只展示第一个，通过flag控制轮播图的走向
      clock: -1 //全局变量
    };
  },
  props: {
    isMobile: {
      //判断是否是移动端
      required: true
    }
  },
  mounted() {
    setTimeout(() => {
      //防止第一屏不不产生动画
      this.flag = 0;
    }, 50);
    this.clock = setInterval(() => {
      //变换轮播图
      if (this.flag + 1 >= this.back.length) this.flag = 0;
      else this.flag++;
    }, 4000);
  },
  methods: {
    changeBanner(index) {
      //手动改变轮播图
      clearInterval(this.clock);
      this.flag = index;
    }
  },
  components: {
    MainHeader
  }
};
</script>

<style lang="stylus" scope>
.banner {
  width: 100%;
  height: 750px;
  overflow: hidden;
  position: relative;

  >.item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 800px;
    color: #fff;
    position: absolute;
    width: 100%;

    .container {
      height: 100%;
      display: flex;
      align-items: center;

      .inContent {
        .title {
          font-size: 40px;
          font-weight: 200;
          transition-delay: 0s;
        }

        .content {
          font-size: 25px;
          font-weight: 100;
          transition-delay: 0.5s;
        }

        p {
          margin-bottom: 50px;
          transition: all 0.5s ease-in;
          opacity: 0;
          transform: translate3d(0, 25px, 0);
        }

        .buttons {
          transition: all 0.5s ease-in;
          transition-delay: 1s;
          opacity: 0;
          transform: translate3d(0, 25px, 0);

          a {
            color: #fff;
            display: inline-block;
            font-size: 15px;
            font-weight: 100;
          }

          .learn {
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 1);
            margin-right: 30px;
          }

          .buy {
            background: #f26444;
            padding: 9px;
            border-radius: 8px;
            border: 2px solid #f26444;
            transition: all 0.3s;
            color: #fff !important;
          }
        }
      }
    }
  }

  >.even {
    color: #000;

    a {
      color: #000 !important;
    }

    .learn {
      border-bottom: 1px solid #000 !important;
    }
  }

  >.active {
    z-index: 10;

    .container {
      .inContent {
        .title {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }

        .content {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }

        .buttons {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }
    }
  }

  >.pots {
    position: absolute;
    bottom: 40px;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 11;

    .pot {
      width: 45px;
      height: 2.5px;
      background: rgba(255, 255, 255, 0.2);
      margin-right: 10px;
      position: relative;
      cursor: pointer;

      &:before {
        position: absolute;
        left: 0;
        top: 0;
        width: 0px;
        height: 2.5px;
        content: '';
        transition: width 4s ease;
        background: #fff;
        opacity: 0;
      }
    }

    .potEven {
      &:before {
        background: #000;
      }
    }

    .active {
      &:before {
        width: 100%;
        opacity: 1;
      }
    }
  }

  >.AllEven {
    .pot {
      background: rgba(0, 0, 0, 0.2);
    }
  }
}

@media (max-width: 600px) {
  .banner {
    height: 600px;

    >.item {
      height: 600px;

      .container {
        align-items: flex-end;
        justify-content: center;

        .inContent {
          width: 100%;
          text-align: center;
          padding-bottom: 60px;

          p {
            margin-bottom: 25px;
          }

          .title {
            font-weight: 100;
            font-size: 32px;
          }

          .content {
            font-size: 22px;
          }
        }
      }
    }

    >.pots {
      bottom: 20px;
    }
  }
}
</style>
